<template>
  <div>
    <TradeInReceiptA4 ref="receiptContent" />
    <button @click="printReceipt">打印</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import TradeInReceiptA4 from "@/components/biz/tradeInReceipt/A4.vue";
import print from "print-js";

// 引用TradeInReceiptA4组件
const receiptContent = ref(null);

// 获取页面中的样式
const getPageStyles = () => {
  const styles = [];

  // 查找页面中的所有样式标签和链接标签
  document
    .querySelectorAll('style, link[rel="stylesheet"]')
    .forEach((styleElement) => {
      styles.push(styleElement.outerHTML);
    });

  return styles.join(" ");
};

// 打印方法
const printReceipt = () => {
  if (receiptContent.value) {
    const htmlContent = receiptContent.value.$el.innerHTML; // 获取渲染的 DOM 内容
    const styles = getPageStyles(); // 获取页面样式

    // 使用 print-js 打印
    print({
      printable: `<div>${styles}${htmlContent}</div>`, // 将样式和内容组合
      type: "raw-html",
      style: `
        /* 这里可以定义额外的样式，确保打印效果良好 */
        @page { size: A4; }
        body { font-size: 12px; }
      `,
    });
  }
};
</script>
